<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户注册页</title>
		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
		<style type="text/css">
			/*整个界面div布局样式，包括背景图及字号*/
			* {
				padding: 0px;
				margin: 0px;
			}
			
			body {
				width: 100%;
				height: 100% ;
				background: url(img/02.png) no-repeat;
				background-size: 100%;
			}
			#main {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -150px 0 0 -200px;
				width: 400px;
				height: 400px;
				overflow: hidden;
				text-align: center;
				background: url(img/002.png);
				background: transparent;
				font-size: 15px;
			}
			/*左侧内容右对齐*/
			
			.tdAlign {
				text-align: right;
			}
			/*文本框内容字体字号样式及边框样式*/
			
			[type] {
				color: #999;
				font-size: 14px;
				border: 1px solid cornflowerblue;
				width: 160px;
				height: 28px;
			}
			/*初始提示信息字体字号样式*/
			
			.innerTxt {
				color: #999;
				padding-left: 5px;
			}
			/*验证不通过时提示内容样式*/
			
			.errTxt {
				color: red;
				padding-left: 5px;
			}
			/*验证通过时提示内容样式*/
			
			.okTxt {
				color: green;
				padding-left: 5px;
			}
			table{
				border-collapse: separate;
				border-spacing: 10px 30px
			}
			
		</style>
	</head>

	<body>
		<div id="main">
			<!--	此处为制作注册表单部分		-->
			<span style="font-size: 30px; color: #000000;">注册账号</span>
			<form action="userServlet?method=add" method="post" id="tijiao">
			<table align="center">
				<tr>
					<td class="tdAlign">用户名：</td>
					<td>
						<input type="text" class="initTxt" id="userName" name="userName"/>
					</td>
					<td class="innerTxt" id="yhmtd">
						长度在7-14之间
					</td>

				</tr>
				<tr>
				<td class="tdAlign">手机号：</td>
				<td>
					<input type="text" class="initTxt" id="userPhone" name="userPhone"/>
				</td>
				<td class="innerTxt" id="sjhtd">
					合法的手机号
				</td>

				</tr>
				<tr>
				<td class="tdAlign">密码：</td>
				<td>
					<input type="password" class="initTxt" id="userPwd" name="userPwd"/>
				</td>
				<td class="innerTxt" id="mmtd">
					长度在6位以上
				</td>

				</tr>
				<tr>
				<td class="tdAlign">重复密码：</td>
				<td>
					<input type="password" class="initTxt" id="reUserPwd" name="reUserPwd"/>
				</td>
				<td class="innerTxt" id="cfmmtd">
					与密码一致
				</td>

				</tr>
				<tr>
				<td class="tdAlign">电子邮箱：</td>
				<td>
					<input type="text" class="initTxt" id="userEmail" name="userEmail"/>
				</td>
				<td class="innerTxt" id="dzyxtd">
					合法的邮箱
				</td>

				</tr>
				<tr>
					<td></td>
					<td>
						<input type="submit" value="立即注册" style="background-color: #008000; border: 1px solid #008000;"/>
					</td>
					<td></td>
				</tr>
			</table>
			</form>
		</div>
		<script type="text/javascript">
		$(function(){
			yyy=null;
			$("#userName").blur(function(){
				var yhma=$("#userName").val();
				if(yhma.length<4 || yhma.length>14){
					yyy=false;
					$("#yhmtd").html("<span class='errTxt'>用户名格式错误</span>")
				}else{
					yyy=true;
					$("#yhmtd").html("<span class='okTxt'>验证通过</span>")
				}
			})
			sss=null;
			$("#userPhone").blur(function(){
				var sjha=$("#userPhone").val();
				var reg=/^[1]\d{10}$/;
				if(reg.test(sjha)==false){
					sss=false;
					$("#sjhtd").html("<span class='errTxt'>手机号格式错误</span>")
				}else{
					sss=true;
					$("#sjhtd").html("<span class='okTxt'>验证通过</span>")
				}
			})
			mmm=null;
			$("#userPwd").blur(function(){
				var mma=$("#userPwd").val();
				if(mma.length<6 || mma.length>10){
					mmm=false;
					$("#mmtd").html("<span class='errTxt'>密码格式错误</span>")
				}else{
					mmm=true;
					$("#mmtd").html("<span class='okTxt'>验证通过</span>")
				}
			})
			cfmmm=null;
			$("#reUserPwd").blur(function(){
				var cfmma=$("#reUserPwd").val();
				var mma=$("#userPwd").val();
				if(mma != cfmma){
					cfmmm=false;
					$("#cfmmtd").html("<span class='errTxt'>与密码不一致</span>")
				}else{
					cfmmm=true;
					$("#cfmmtd").html("<span class='okTxt'>验证通过</span>")
				}
			})
			youxiang=null;
			$("#userEmail").blur(function(){
				var dzyxa=$("#userEmail").val();
				var reg=/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(reg.test(dzyxa)==false){
					youxiang=false;
					$("#dzyxtd").html("<span class='errTxt'>邮箱格式错误</span>")
				}else{
					youxiang=true;
					$("#dzyxtd").html("<span class='okTxt'>验证通过</span>")
				}
			})
				$("#tijiao").submit(function(){
				if(yyy==true && sss==true && mmm==true && cfmmm==true && youxiang==true ){
					alert("验证成功");
					return true;
				}else{
					alert("验证失败");
					return false;
				}
			})
			
		})
		</script>
	</body>

</html>